<template>
  <el-dialog
      v-model="add_material_visible"
      :title=" title_string "
      :close-on-click-modal='false'
      :close-on-press-escape='false'
      :show-close='false'
  >
    <el-form :model="handle_variable" :rules="add_material_rules" ref="add_material_ref"
             :label-position=" 'right' " label-width="150px">

      <el-form-item prop="handle_group_id" label="处理方分组">
        <FuzzySearchHandleGroup @DataUse="handle_group_select($event as any)"
                                ref="handle_group_fuzzy_search_ref"
                                :disable="false"
                                @DataClear="handle_group_clear"/>
      </el-form-item>

      <el-form-item prop="handle_name" label="名称">
        <el-input v-model="handle_variable.handle_name" autocomplete="off"/>
      </el-form-item>
      <el-form-item prop="mnemonic" label="助记码">
        <el-input v-model="handle_variable.mnemonic" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel_add_material(add_material_ref)">取消</el-button>
				<el-button type="primary" @click="add_small(add_material_ref)">确定</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script setup lang="ts">
import {reactive, ref} from "vue";
import {ElMessage, FormInstance, FormRules} from "element-plus";
import {HandleCRUDResponse, HandleList} from "@/api/inventory/handle/type.ts";
import {reqHandleCRUD} from "@/api/inventory/handle";
import FuzzySearchHandleGroup, {HandleGroupAutoCompletion} from "@/components/inventory/FuzzySearchHandleGroup.vue";


const handle_group_fuzzy_search_ref = ref()  // FuzzySearchHandleGroup 组件ref
// 在搜索框中选择了处理方分组后
const handle_group_select = (data: HandleGroupAutoCompletion) => {
  handle_variable.handle_group_id = data.id
}
// 清除已经选择的处理方分组
const handle_group_clear = () => {
  handle_group_fuzzy_search_ref.value.clear_input()
  handle_variable.handle_group_id = null
}

const title_string = ref('')
// 向外暴露函数，用以打开本框和传值
const show_handle_CU = (row: HandleList | null, title: '添加' | '修改') => {
  title_string.value = title + '处理方'
  if (title === '修改' && row !== null) {
    handle_variable.handle_id = row.id
    handle_variable.handle_name = row.name
    handle_variable.mnemonic = row.mnemonic
  } else {
    handle_variable.handle_id = null
    handle_variable.handle_name = null
    handle_variable.mnemonic = null
  }
  add_material_visible.value = true
}
defineExpose({show_handle_CU});

// 接收父组件传来的函数，在添加或修改操作完成后执行函数提醒父组件刷新页面
const emit = defineEmits(['refresh_func'])
const refresh = () => {

  emit('refresh_func')
}

const add_material_ref = ref<FormInstance>()
// 增删改查所需携带的变量
const handle_variable = reactive<{
  handle_name: string | null
  handle_id: number | null
  mnemonic: string | null
  handle_group_id: number | null
}>({
  handle_name: null,
  handle_id: null,
  mnemonic: null,
  handle_group_id: null
})
const add_material_visible = ref(false) // 决定添加和修改框是否显示

// // 检查处理方分组id是否存在
// const handle_group_id_check = (value: any, callback: any) => {
//   if (value === null) {
//     callback(new Error('请选择处理方分组'))
//   }
// }

// 校验规则
const add_material_rules = reactive<FormRules>({
  // handle_group_id: [{validator: handle_group_id_check, trigger: 'blur'}],
  hand_group_id: [{
    type: 'number',
    message: '请选择所属分类',
    required: true,
  }],
  handle_name: [{
    type: 'string',
    message: '处理方名称需要在1到100个字符之间',
    max: 100,
    min: 1,
    required: true,
  }],
  mnemonic: [{
    type: 'string',
    message: '助记码需要在1到100个字符之间',
    max: 100,
    min: 1,
    required: true,
  }],
})

// 关闭添加和修改框
const cancel_add_material = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()  // 清除表格的错误提示
  add_material_visible.value = false
}

// 添加小类
const add_small = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      if (title_string.value === '添加处理方') {
        reqHandleCRUD({
          mode: "create",
          create: {
            handle_name: handle_variable.handle_name as string,
            mnemonic: handle_variable.mnemonic as string,
            handle_group_id: handle_variable.handle_group_id as number
          }
        }).then((res: HandleCRUDResponse)=>{
          ElMessage.success(res.success?.message)
        })
      } else {
        reqHandleCRUD({
          mode: "update",
          update: {
            handle_name: handle_variable.handle_name as string,
            mnemonic: handle_variable.mnemonic as string,
            handle_id: handle_variable.handle_id as number,
            handle_group_id: handle_variable.handle_group_id as number
          }
        }).then((res: HandleCRUDResponse)=>{
          ElMessage.success(res.success?.message)
        })
      }
      add_material_visible.value = false
      refresh()
      handle_group_clear()
    }
  })
}
</script>

<style scoped>

</style>